交互式数据可视化－D3.js（二）选择集和数据

选择集

select和selectAll类似jquery：

    d3.select('body')
    d3.select('.body')
    d3.select('#body')
    d3.selectAll('p')
    d3.selectAll('.box')
    var conent = document.getElementById('#box')
    d3.select(conent)

操作选择集

查看状态

判断选择集是否为空：

    selection.empty()

返回第一个选择集：

    selection.node()

返回选择集的长度：

    selection.size()

设定和获取

    selection.attr(name,[ name])    

设置或获取选择集的属性name是属性名称，value是属性值，省略value则返回属性值
有部分属性不能通过attr获取或设置则使用：

    selection.property(name,[ name])

使用方法一致，总之不能通过attr获取的属性，都可以考虑property
设定className开关

    selection.classed(name,[ name])

name是类名， value是一个布尔值，表示是否开启

添加，插入和删除

在选择集的末尾插入元素：

    selection.append()

在选择集的元素之前插入元素：

    selection.inster()

删除选中的元素：

    selection.remove()

数据绑定

d3.select和d3.selectAll返回元素的选择集，选择集上是没有数据的，数据绑定就是使选择的元素添加数据。相关的函数有两个

selection.datum()

和

selection.data()

datum的工作过程

datum的方法很简单，使用的也比较少。

    var p = d3.select('.box').selectAll('p');
    p.datum('这里是数据绑定').append('span').text(function(d, i){
        return i + "<----> " + d;
    });

datum绑定了一个字符串这里是数据绑定到选择集的子元素上。这一点很常用。

data()的工作过程

data能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，data同样能够处理。

    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    
    var p = d3.select('.box').selectAll('p');
    var updateData = p.data([2,4,6])
    updateData.text(function(d, i){
        console.log(d)
        return d;
    })
    updateData.enter().append('p').text(function(d, i){
        console.log(d);
        return d;
    });
    updateData.exit().remove();

多出的元素在最后renove。